昨天替 Idea Note 加入了第一個防呆：如果輸入框沒有內容，或只輸入空白，就不允許新增筆記。

今天沒有急著做下一個大功能，而是繼續處理新增完成後的操作。

目前按下儲存後，筆記雖然成功新增了，輸入框裡卻還留著原本的文字。使用者如果想再記下一個想法，必須先手動刪除內容，再點一次輸入框才能繼續輸入。

功能並沒有壞，但用起來就是有一點卡。

儲存之後應該發生什麼？

我重新走了一次新增筆記的流程：

1. 點選輸入框。
2. 輸入筆記內容。
3. 按下儲存。
4. 筆記出現在清單中。
5. 刪除輸入框裡的舊內容。
6. 再次點選輸入框。
7. 開始輸入下一則筆記。

後面兩個步驟其實可以由程式自動完成。

對使用者來說，理想的狀態應該是：筆記儲存成功後，輸入框恢復空白，而且可以直接開始寫下一則內容。

這次要交給 Codex 的任務因此很明確：

新增筆記成功後，請清空輸入框、移除原本的錯誤提示，並讓游標重新回到輸入框。請不要修改其他功能。

清空輸入框

清空輸入框的方式很直接：

noteInput.value = "";

但這行程式不能放在任何地方都一樣。

如果使用者輸入的是空白內容，筆記並沒有成功新增，這時就不應該把輸入框清掉；否則使用者只會看到內容突然消失，卻不知道發生了什麼事。

所以清空的動作必須放在新增成功之後。

if (content === "") {
  errorMessage.textContent = "請輸入筆記內容";
  return;
}

// 新增筆記成功後
noteInput.value = "";

前面的 return 會阻止程式繼續往下執行。只有真正通過檢查的內容，才會走到清空輸入框這一步。

舊的錯誤提示也要一起處理

昨天加入「請輸入筆記內容」的提示後，我又發現另一個小問題。

使用者第一次送出空白內容時，錯誤訊息會出現；但他修正內容並成功儲存後，如果提示還留在畫面上，就會讓人誤以為剛才的筆記仍然有問題。

因此，新增成功時還要把舊提示移除：

errorMessage.textContent = "";

這不是新的主要功能，卻會影響使用者能不能立刻理解目前的狀態。

錯誤發生時顯示提示，錯誤被修正後，提示也應該跟著消失。

用 focus() 把游標送回輸入框

清空內容之後，我還希望使用者可以直接輸入下一則筆記，不需要再次用滑鼠點選輸入框。

這時可以使用：

noteInput.focus();

focus() 會讓輸入框重新成為目前正在操作的元素。

完整的成功流程大致會像這樣：

noteInput.value = "";
errorMessage.textContent = "";
noteInput.focus();

三行程式分別負責三件事：

• 清除上一則內容
• 移除已經失效的錯誤提示
• 準備輸入下一則筆記

單獨看都很小，但組合起來後，操作會順很多。

電腦和手機的感受不